<template>
  <div class="integral fixed bottom-0 left-0 right-0 top-0 h-100% overflow-y-auto" style="background: linear-gradient(180deg, #FFF 0%, #F5F5F5 100%);">
    <div class="sticky left-0 right-0 top-0 z-999">
      <div class="relative">
        <div class="z-999 flex items-center justify-between px-20rpx" :style="{ paddingTop: `${searchBarTop}px` }" @click.stop="goback">
          <uni-icons type="back" size="28" />
          <span class="text-center text-36rpx font-600">积分</span>
          <div class="text-hex-fff">111</div>
        </div>
      </div>
    </div>
    <div class="mt-48rpx">
      <nav-bar :nav-data="cloumnList" :curIndex="currentTab" :type="'point'" @handleSwitchBar="handTabClick" />
      <div v-if="currentTab !== 4" class="rounded-32rpx px-32rpx">
        <div class="mb-32rpx mt-24rpx px-32rpx">
          <div class="flex items-center justify-between">
            <span>总积分：{{ totalPoints }}</span>
            <!-- <span v-if="availablePoint">可用积分：{{ availablePoint }}</span> -->
          </div>
        </div>
        <div class="rounded-32rpx bg-hex-fff px-32rpx pb-24rpx">
          <div v-if="availablePointList.length > 0">
            <div
              v-for="item in availablePointList"
              class="item mb-32rpx flex items-center p-24rpx">
              <div class="mr-24rpx h-56rpx w-56rpx bg-hex-EEFAF7">
                <image class="h-56rpx w-56rpx flex-1"
                       :src="`${cdnUrl}/imgs/mine/my_slices/integral.png${imgVersion}`" mode="aspectFill" />
              </div>
              <div class="flex-1">
                <div class="flex items-center justify-between">
                  <span v-if="item" class="text-28rpx font-600 text-hex-333">{{ item.description }}</span>
                  <span v-if="item" class="text-32rpx text-hex-FF8A71">{{ currentSymbol }}{{ item.amount }}</span>
                </div>
                <div class="flex items-center justify-between text-24rpx text-hex-999">
                  <span v-if="item">{{ formatTime(item.createdAt, 'YYYY-MM-DD HH:mm:ss') }}</span>
                  <span v-if="currentTab===0">积分获得</span>
                  <span v-if="currentTab===1">积分使用</span>
                  <!-- <span v-if="currentTab===2">积分抵扣</span> -->
                  <span v-if="currentTab===2">积分到期</span>
                </div>
              </div>
            </div>
          </div>
          <div v-if="availablePointList.length===0" class="flex flex-col items-center justify-center">
            <image
              :src="`${cdnUrl}/imgs/noOpen/noText.png${imgVersion}`"
              mode="scaleToFill"
              class="h-300rpx w-300rpx"
            />
            <div class="mb-64rpx text-28rpx text-hex-7C8699">暂无数据</div>
          </div>
        </div>
      </div>
      <div v-if="currentTab===4" class="px-32rpx">
        <rich-text :nodes="rulesText" />
      </div>
    </div>
  </div>
</template>

<script lang='ts' setup>
import { useUserStore } from '@/stores/user'

const userStores = useUserStore()
let searchBarTop: any = $ref('24')
let rightBar: any = $ref(0)
onLoad(() => {
  // #ifndef H5
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  searchBarTop = menuButtonInfo.top
  rightBar = menuButtonInfo.width

  // #endif
})
const goback = () => {
  uni.navigateBack({
    delta: 1,
  })
}
let topHight = $ref(0)
let currentTab = $ref(0)
let cloumnList: any = $ref([
  {
    id: 0,
    name: '积分获取',
    symbol: '+',
  },
  {
    id: 1,
    name: '积分兑换',
    symbol: '-',
  },
  // {
  //   id: 2,
  //   name: '积分抵扣',
  //   symbol: '-',
  // },
  {
    id: 2,
    name: '积分过期',
    symbol: '-',
  },
  {
    id: 4,
    name: '积分规则',
  },
])
// let availablePoint: any = $ref('')
// 获取可用积分
// const getAvailableTotal = async () => {
//   const { status, data, error } = await Fetch('/qqyapi/member/points/available')
//   if (status !== 200 || data.code !== 0) {
//     return
//   }
//   if (data.code === 0) {
//     availablePoint = data?.result
//   }
// }
let availablePointList: any = $ref([])
let pageNo: any = $ref(1)
let isGetMore: any = $ref(false)
let currentSymbol: any = $ref('+')
const handTabClick = (item) => {
  currentTab = item.id
  currentSymbol = item.symbol
  availablePointList = []
  pageNo = 1
  if (currentTab === 4) {
    getRulesText()
    return
  }
  getAvailableList()
}
// 获取积分明细
const getAvailableList = async () => {
  const reqData = {
    method: 'get',
    data: {
      pageNo,
      pageSize: 10,
      tab: currentTab,
    },
    headers: { UserId: userStores.user.id },
  }
  const { status, data, error } = await Fetch('/qqyapi/member/points/logs', reqData)
  let tempList: any = []
  tempList = data?.result
  availablePointList = availablePointList.concat(tempList?.records)
  if (availablePointList.length < tempList.total) {
    isGetMore = true
  }
}
let rulesText: any = $ref('')
// 获取积分规则
const getRulesText = async () => {
  const { status, data, error } = await Fetch('/qqyapi/member/points/instruction')
  if (status !== 200 || data.code !== 0) {
    return
  }
  if (data.code === 0) {
    rulesText = data?.result
  }
}

let totalPoints: any = $ref(0)
//请求总积分
const getTotalPoints = async () => {
  const { data, status, error } = await Fetch('/api/s/t/user', {
    method: 'post',
    headers: { timestamp: new Date().getTime() },
  })
  if (status !== 200 || data.code !== 0) {
    return
  }
  if (data.code === 0) {
    totalPoints = data.result?.dataList[0]?.points
  }
}

// 触底加载更多
onReachBottom(() => {
  if (isGetMore) {
    pageNo++
    getAvailableList()
  }
})
onMounted(() => {
  // getAvailableTotal()
  getTotalPoints()
  getAvailableList()
})
</script>

<style lang='scss' scoped>
.integral{
  .item{
    position: relative;

    & :not(:last-child)::after {
      content: '';
      position: absolute;
      bottom: -32rpx;
      left: 0;
      width: 100%;
      height: 2rpx;
      background-color: #f5f5f5; /* 分割线颜色 */
    }
  }
}
</style>
